﻿<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
	<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
	<title>乐优商城--结算页</title>

    <link rel="stylesheet" type="text/css" href="/css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="/css/pages-getOrderInfo.css" />
</head>

<body>
	<!--head-->
	<div id="orderInfoApp">
		<div class="top">
			<shortcut />
		</div>
	<div  class="cart py-container">
			<!--logoArea-->
			<div class="logoArea">
				<div class="fl logo"><span class="title">结算页</span></div>
			</div>
			
		<!--主内容-->
		<div class="checkout py-container">
			<div class="checkout-tit">
				<h4 class="tit-txt">填写并核对订单信息</h4>
			</div>
			<div class="checkout-steps">
				<!--收件人信息-->
				<div class="step-tit">
					<h5>收件人信息<span><a href="/home/setting/address" >新增收货地址</a></span></h5>
				</div>
				<div class="step-cont">
					<div class="addressInfo">
						<ul class="addr-detail">
							<!--<li class="addr-item" v-for="(a,i) in addresses" :key="i">
							  <div>
								  <div :class="{con:true,name:true,selected:i === selectedAddress}"><a href="javascript:;" @click.stop="selectedAddress=i" >{{a.name}}<span title="点击取消选择"></span>&nbsp;</a></div>
								<div class="con address">{{a.state + a.city + a.district + a.address}} <span>{{a.phone}}</span>
									<span class="base" v-if="a.default">默认地址</span>
									<span class="edittext"><a data-toggle="modal" data-target=".edit" data-keyboard="false" >编辑</a>&nbsp;&nbsp;<a href="javascript:;">删除</a></span>
								</div>
								<div class="clearfix"></div>
							  </div>
							</li>-->
						</ul>
						<!--添加地址-->
                          <div  tabindex="-1" role="dialog" data-hasfoot="false" class="sui-modal hide fade edit">
						  <div class="modal-dialog">
						    <div class="modal-content">
						      <div class="modal-header">
						        <button type="button" data-dismiss="modal" aria-hidden="true" class="sui-close">×</button>
						        <h4 id="myModalLabel" class="modal-title">添加收货地址</h4>
						      </div>
						      <div class="modal-body">
						      	<form action="" class="sui-form form-horizontal">
									<div class="control-group" style="display: none">
										<label class="control-label">收货id：</label>
										<div class="controls">
											<input type="text" class="input-medium id" value="">
										</div>
									</div>
						      		 <div class="control-group">
									    <label class="control-label">收货人：</label>
									    <div class="controls">
									      <input type="text" class="input-medium name">
									    </div>
									  </div>
									   
									   <div class="control-group">
									    <label class="control-label">详细地址：</label>
									    <div class="controls">
									      <input type="text" class="input-large receivingName" id="deliveryAddress" value="">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">联系电话：</label>
									    <div class="controls">
									      <input type="text" class="input-medium phones" value="">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">邮箱：</label>
									    <div class="controls">
									      <input type="text" class="input-medium emaile" value="">
									    </div>
									  </div>
									   <div class="control-group">
									    <label class="control-label">地址别名：</label>
									    <div class="controls">
									      <input type="text" class="input-medium localhost" value="">
									    </div>
									    <div class="othername">
									    	建议填写常用地址：<a href="#" class="sui-btn btn-default">家里</a>　<a href="#" class="sui-btn btn-default">父母家</a>　<a href="#" class="sui-btn btn-default">公司</a>
									    </div>
									  </div>
						      	</form>
						      </div>
						      <div class="modal-footer">
						        <button type="button" data-ok="modal" class="sui-btn btn-primary btn-large confirm">确定</button>
						        <button type="button" data-dismiss="modal" class="sui-btn btn-default btn-large">取消</button>
						      </div>
						    </div>
						  </div>
						</div>
						 <!--确认地址-->
					</div>
					<div class="hr"></div>
					
				</div>
				<div class="hr"></div>
				<!--支付和送货-->
				<div class="payshipInfo">
					<div class="step-tit">
						<h5>支付方式</h5>
					</div>
					<div class="step-cont">
						<ul class="payType">
							<li class="wx" >微信付款<span title="点击取消选择"></span></li>
							<li class="selected">货到付款<span title="点击取消选择"></span></li>
						</ul>
					</div>
					<div class="hr"></div>
					<div class="step-tit">
						<h5>送货清单</h5>
					</div>
					<div class="step-cont">
						<ul class="send-detail">
							<li >
								<div class="sendGoods">
									<ul class="yui3-g">
										<!--<li class="yui3-u-1-6">
											<span><img width="70px" height="70px" src="/img/goods.png"/></span>
										</li>
										<li class="yui3-u-7-12">
											<div class="desc">macbook air 2017新款，带bar 顺畅装逼体验</div>
											<div class="seven">7天无理由退货</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="price">￥8848.00</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="num">X1</div>
										</li>
										<li class="yui3-u-1-12">
											<div class="exit">有货</div>
										</li>-->
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<div class="hr"></div>
				</div>
				<div class="linkInfo">
					<div class="step-tit">
						<h5>发票信息</h5>
					</div>
					<div class="step-cont">
						<span>普通发票（电子）</span>
						<span>个人</span>
						<span>明细</span>
					</div>
				</div>
				<div class="cardInfo">
					<div class="step-tit">
						<h5>使用优惠/抵用</h5>
					</div>
				</div>
			</div>
		</div>
		<div class="order-summary">
			<div class="static fr">
				<div class="list">
					<span><i class="number"></i>件商品，总商品金额</span>
					<em class="allprice"></em>
				</div>
				<div class="list">
					<span>返现：</span>
					<em class="money">0.00</em>
				</div>
				<div class="list">
					<span>运费：</span>
					<em class="transport">0.00</em>
				</div>
			</div>
		</div>
		<div class="clearfix trade" th:inline="text">
			<input id="goodsListDtoResult" type="hidden" th:value="${goodsListDtoResult}">

			<div class="fc-price">应付金额:　<span class="amount ">¥8848</span></div>

		</div>

		<div class="submit">
			<a class="sui-btn btn-danger btn-xlarge" id="pay">提交订单</a>
		</div>
	</div>

	</div>
	<script src="/js/vue/vue.js"></script>
	<script src="/js/axios.min.js"></script>
	<script src="/js/common.js"></script>
	<script type="text/javascript">
        var orderInfoVm = new Vue({
            el:"#orderInfoApp",
            data:{
                addresses:[// 可选地址列表,假数据，需要从后台查询
					{
					    name:"锋哥",// 收件人姓名
						phone:"15800000000",// 电话
						state:"上海",// 省份
						city:"上海",// 城市
						district:"浦东新区",// 区
						address:"航头镇航头路18号传智播客 3号楼",// 街道地址
						zipCode:"210000", // 邮编
						default: true
					},
                    {
                        name:"张三",// 收件人姓名
                        phone:"13600000000",// 电话
                        state:"北京",// 省份
                        city:"北京",// 城市
                        district:"朝阳区",// 区
                        address:"天堂路 3号楼",// 街道地址
                        zipCode:"100000", // 邮编
                        default: false
                    }
				],
				selectedAddress: 0,

            },
			components:{
                shortcut: () => import("/js/pages/shortcut.js")
			}
        });
	</script>
	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>

</body>
	<script type="text/javascript" src="/js/plugins/jquery/jquery.min.js"></script>
	<script type="text/javascript">$(".footer").load("/foot.html");</script>
	<!--页面底部END-->

<script type="text/javascript" src="/js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="/js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="/js/pages/getOrderInfo.js"></script>
</body>

<script type="text/javascript">
	var goodsListDtoResult=JSON.parse($("#goodsListDtoResult").val());
	console.log(goodsListDtoResult);
	var amount=0;
	$(".addr-detail").append("<li class=\"addr-item\" v-for=\"(a,i) in addresses\" :key=\"i\">\n" +
			"  <div>\n" +
			"\t  <div :class=\"{con:true,name:true,selected:i === selectedAddress}\"><a href=\"javascript:;\" @click.stop=\"selectedAddress=i\" class='receivingName'>"+goodsListDtoResult.shoppingCartDtoList[0].receivingName+"<span title=\"点击取消选择\"></span>&nbsp;</a></div>\n" +
			"\t<div class=\"con address\"><span class='deliveryAddress'>"+goodsListDtoResult.shoppingCartDtoList[0].deliveryAddress+"</span><span class='phone'>"+goodsListDtoResult.shoppingCartDtoList[0].phone+"</span>\n" +
			"\t\t<span class=\"edittext\"><a class='update' data-toggle=\"modal\" data-target=\".edit\" data-keyboard=\"false\" id="+goodsListDtoResult.shoppingCartDtoList[0].receivingId+">编辑</a>&nbsp;&nbsp;<a href=\"javascript:;\">删除</a></span>\n" +
			"\t</div>\n" +
			"\t<div class=\"clearfix\"></div>\n" +
			"  </div>\n" +
			"</li>");
	for (let i = 0; i < goodsListDtoResult.shoppingCartDtoList.length; i++) {
			$(".yui3-g").append("<li class=\"yui3-u-1-6\">\n" +
					"\t<span><img width=\"70px\" height=\"70px\" src="+goodsListDtoResult.shoppingCartDtoList[i].goodsImg+"></span>\n" +
					"</li>\n" +
					"<li class=\"yui3-u-7-12\">\n" +
					"\t<div class=\"desc\">"+goodsListDtoResult.shoppingCartDtoList[i].productName+"</div>\n" +
					"\t<div class=\"seven\">7天无理由退货</div>\n" +
					"</li>\n" +
					"<li class=\"yui3-u-1-12\">\n" +
					"\t<div class=\"price\">￥"+goodsListDtoResult.shoppingCartDtoList[i].price+"</div>\n" +
					"</li>\n" +
					"<li class=\"yui3-u-1-12\">\n" +
					"\t<div class=\"num\">X"+goodsListDtoResult.shoppingCartDtoList[i].quantity+"</div>\n" +
					"</li>\n" +
					"<li class=\"yui3-u-1-12\">\n" +
					"\t<div class=\"exit\">有货</div>\n" +
					"</li>");
					amount+=parseFloat(goodsListDtoResult.shoppingCartDtoList[i].price)*parseFloat(goodsListDtoResult.shoppingCartDtoList[i].quantity);
			}
				$(".number").text(goodsListDtoResult.shoppingCartDtoList.length);
				$(".allprice").text("￥"+amount);
				$(".amount").text("￥"+amount);
		
		$(document).on('click',".update",function () {
				$(".name").val($(".receivingName").text());
				$("#deliveryAddress").val($(".deliveryAddress").text());
				$(".phones").val($(".phone").text());
				$(".id").val($(".update").attr("id"));
		})

		$(document).on('click','.confirm',function () {
			var receivingDtoResult={
				"name":$(".name").val(),
				"phone":$(".phones").val(),
				"deliveryAddress":$("#deliveryAddress").val(),
				"location":$(".localhost").val(),
				"id":$(".id").val()
			}

			$.ajax({
				url:"/receiving/update/address",
				type:"post",
				data: receivingDtoResult,
				dataType:"json",
				success:function (s) {
					if (s.data==true){
						$(".receivingName").text($(".name").val());
						$(".deliveryAddress").text($("#deliveryAddress").val());
						$(".phone").text($(".phones").val());
					}
				}
			})
		})

		$(document).on('click','.newadd',function () {

			if (receivingDtoResult.id==""){
				let receivingDtoResult={
					"name":$(".name").val(),
					"phone":$(".phones").val(),
					"deliveryAddress":$(".deliveryAddress").val(),
					"location":$(".localhost").val(),
				}
				$.ajax({
					url:"/receiving/add/address",
					type: "post",
					data:receivingDtoResult,
					dataType: "json",
					success:function (s) {
						if (s.data==true){
							$(".receivingName").text($(".name").val());
							$(".deliveryAddress").text($("#deliveryAddress").val());
							$(".phone").text($(".phones").val());
						}
					}
				})
				return;
			}
		})
	$(document).on('click','#pay',function () {

		var goodsMap={};

		var a=new Array()
		for (let i=0;i<goodsListDtoResult.shoppingCartDtoList.length;i++){
		goodsMap[goodsListDtoResult.shoppingCartDtoList[i].gid]=goodsListDtoResult.shoppingCartDtoList[i].quantity;
		}
		var OrderAddDtoReq={
			"goodsMap":goodsMap,
			"addreId":goodsListDtoResult.shoppingCartDtoList[0].receivingId,
			"payType":"WeChat Pay",
			"freight":$(".transport").text(),
		}
		let jsonStr=JSON.stringify(OrderAddDtoReq);
		console.log(jsonStr);
		$.ajax({
			url:"/order/add/order",
			type:"post",
			contentType:"application/x-www-form-urlencoded; charset=utf-8",
			data:{"jsonStr":jsonStr},
			success:function (s) {
				if (s.data==true){
					alert("订单提交成功");
					window.location.href="/home/index";
				}
			}
		})

	})
</script>
</html>